<template>
    <div id="basic">
        <!-- <div class="title">成人膳食测评报告</div>
        <div id="createTime">报告日期：{{ report_time }}</div> -->
      <!-- <el-divider  border-style="dashed"  style="border-color:#2196f3">
        <div class="subTitle">历史曲线图</div>
      </el-divider> -->
  
         <!-- 生长发育曲线图 -->
      <div style=" margin-top: 20px;display:flex">
        <div style="width: 60%;background-color:#2196f3;height: 100px;text-align: center;line-height: 100px; " >
            <span style="font-size: 30px; font-weight: bold; color: #ffffff" >成人</span><span style="font-size: 30px; color: #666666; margin-left: 20px" >生长发育曲线图</span>
        </div>
          <div style="height: 100px; width: 40%;background-color:#2196f3;">
          <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
        </div>
      </div>
        <div style="width: 100%; height: 40px; background-color: #2196f3; margin-top: 10px; display: flex;">
          <div><img src="../../assets/img/12_1.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">成人基本信息</div>
        </div>
           <div style="width: 1070px; border-top: 2px solid #2196f3; border-right: 2px solid #2196f3;  margin-top: 10px">
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">检测日期</div>
                <div style="width: 90%; height: 40px; border-bottom: 2px solid #2196f3; line-height: 40px; text-indent: 20px;">
                  {{ report_time }}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  成人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{contents.username ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  性别
                </div>
                <div style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  {{contents.sex == 1 ? '女':'男' ?? '[]'}}
                </div>
                <div style="background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  出生日期
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{birth ?? '[]'}}
                </div>
                <div style=" background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.guardian_name ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人手机号
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >
                  {{contents.guardian_mobile ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  身高
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.height ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.weight ?? '[]'}}KG
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  头围
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.touwei ?? '[]'}}CM
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生身长
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengsg ?? '[]'}}CM
                </div>
                <div style="background-color:#2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengtz ?? '[]'}}KG
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  腹围
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.fuwei ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  血型
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.xuexing_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  民族
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.minzu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护关系
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.guanxi_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  家长教育
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.jiaoyu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生情况
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.birthSituation_value ?? '[]'}}
                </div>
              </div>
            </div>
  
  
      <div style="display:flex;border: 2px solid #2196f3;margin-top:20px">
          <div id="myChart1" :style="{width: '33%', height: '550px',}"></div>
          <div id="myChart2" :style="{width: '33%', height: '550px',}"></div>
          <div id="myChart3" :style="{width: '33%', height: '550px', }"></div>
      </div>
     
    </div>
  </template>
  
  <script setup>
  import {defineComponent, onMounted, ref, watch} from 'vue';
  import * as echarts from 'echarts'
  import http, {baseUrl} from "../../utils/http";
  import {useRoute, useRouter} from "vue-router"
  const router = useRouter()
  const route = useRoute()
  const hospital_name = ref()
  const report_time = ref()
  const reportId = ref()
  const contents = ref({})
  const birth = ref()
  const username = ref()
  const guardian = ref()
  const birthStatus = ref()
  onMounted(() => { // 需要获取到element,所以是onMounted的Hook
    reportId.value = route.params.reportId
    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth
  
    http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
      report_time.value = res.data.data.times
      contents.value = res.data.data.contents;
      birth.value = res.data.data.contents.birth;
    })
  
    http.get('api/archives/viewreport?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
      hospital_name.value = res.data.data.hospital_name
  
      let color = ["#3EA4AA"];
      let color1 = ["#D0443B", "#3EA4AA"];
      let color2 = ["#D0443B", "#3EA4AA"];
      let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
      var arr = [];
      var arr2 = [];
      var parr = res.data.data.contents.primaryHeight;
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arr2.push(parr[i].month);
      }
      var arr1 = [];
      var arr3 = [];
      var parr1 = res.data.data.contents.primaryWeight;
      for (let i = 0; i < parr1.length; i++) {
        arr1.push(parr1[i].content);
        arr3.push(parr1[i].month);
      }
  
      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "次数",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "dotted"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(83,148,208,0.15)",
                  "rgba(103,194,58,0.15)",
                  "rgba(226,203,80,0.15)",
                  "rgba(226,115,80,0.15)"
                ]
              }
            }
          }
        ],
        series: [
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumBmi
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
  
      var myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        backgroundColor: "#fff",
        color: color1,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: arr2
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "身高",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[0]
              }
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumHeight
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart1.resize();
      });
  
      var myChart2 = echarts.init(document.getElementById("myChart3"));
      myChart2.value = myChart2;
      myChart2.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: arr3
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "体重",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0]
              }
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr1
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumWeight
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart2.resize();
      });
    })
    setTimeout(() => {
      print('print-all')
    }, 2000)
  });
  </script>
  
  <style scoped>
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  #basic {
    font-size: 14px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break:break-all;
    margin: 60px auto 0 auto;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  #basic #createTime {
    font-size: 16px;
    color:#999999;
    float: right;
  }
  </style>
  